<%@page import="org.proddevplm.dao.data.activities.Activity"%>
<%@page import="org.proddevplm.dao.data.requirements.VOCTable"%>
<%@page import="org.proddevplm.dao.data.requirements.Requirements"%>
<%@page import="java.util.List"%>
<%@page import="org.proddevplm.constants.ControllerConstants"%>
<%@page import="org.proddevplm.business.activity.constants.ActivityConstants" %>
<%@page import="org.proddevplm.business.tools.constants.ToolsConstants" %>

<script>

	$ (function(){
		$( "button" ).button();
		$("#voctable").hide();
		$("#doneVoct").hide();
	});

	function addWhat(id){
		$("#voctDialog").dialog("open");
		document.getElementById('currentId').value = id;
	}
	
	function addHow(id){
		$("#voctDialog").dialog("open");
		document.getElementById('currentId').value = id;
	}
	
	function addWhy(id){
		$("#voctDialog").dialog("open");
		document.getElementById('currentId').value = id;
	}
	
	function addWho(id){
		$("#voctDialog").dialog("open");
		document.getElementById('currentId').value = id;
	}
	//nu stiu cum sa iau Id-ul button-ului din dialog()
	$("#voctInput").keyup(function(event){
		if(event.keyCode == 13){
			$("#Add information").click();
		}
	});
	
	$( "#voctDialog" ).dialog({
		autoOpen: false,
		height: 200,
		width: 350,
		modal: true,
		buttons: {
			"Add information": function() {
				var value = $("#voctInput").val();
				var newId = document.getElementById('currentId').value;
							
				var sel = document.getElementById(newId);
				sel.options[sel.options.length] = new Option(value, value);
				
				document.getElementById('voctInput').value = null;
				$( this ).dialog( "close" );
				},
			Cancel: function() {
				$( this ).dialog( "close" );
			}
		},
		close: function() {
			$( this ).dialog( "close" );
		}
	});
	
	function submitLine(requirement, stakeholder, index){
		$("#line").val(index);
		
		var whatSelId = "what_"+index;
		var howSelId = "how_"+index;
		var whySelId = "why_"+index;
		var whoSelId = "who_"+index;
		
		var whatIndex = 0;
		var howIndex = 0;
		var whyIndex = 0;
		var whoIndex = 0;
		
		var whats = '';
		var hows = '';
		var whys = '';
		var whos = '';
		
		
		$("#"+whatSelId+" option").each(function(){
			if(whatIndex++>0){
				whats+='~';
			}
			whats+=$(this)[0].value;
		});
		
		$("#"+howSelId+" option").each(function(){
			if(howIndex++>0){
				hows+='~';
			}
			hows+=$(this)[0].value;
		});
		
		$("#"+whySelId+" option").each(function(){
			if(whyIndex++>0){
				whys+='~';
			}
			whys+=$(this)[0].value;
		});
		
		$("#"+whoSelId+" option").each(function(){
			if(whoIndex++>0){
				whos+='~';
			}
			whos+=$(this)[0].value;
		});
		
		var activityName = document.getElementById('activitySelect').value;
		
		var arguments="activityName="+activityName+"&requirement="+requirement+"&stakeholder="+stakeholder+"&whats="+whats+"&hows="+hows+"&whys="+whys+"&whos="+whos;
		ajaxCall("toolsManager", "13", arguments, confirmation);
	}
	
	function confirmation(data){
		var dataString = data.toString();
		var index = document.getElementById('line').value;
		var tdId = "action_"+index;
		var message = "completed";
		
		//if not evaluated correctly
		if (dataString == 'Information successfully added in the database'){
			alert("true");
			$('#'+tdId).html(message);
		}
	}
	
	function clearLine(index){
		var whatSelId = "what_"+index;
		var howSelId = "how_"+index;
		var whySelId = "why_"+index;
		var whoSelId = "who_"+index;
		
		$('#'+whatSelId+' >option').remove();
		$('#'+howSelId+' >option').remove();
		$('#'+whySelId+' >option').remove();
		$('#'+whoSelId+' >option').remove();
	}
	
	function doneVoct(activityName){
		$("#activityName").val(activityName);
		document.forms['voctForm'].submit();
	}
	
	function approveActivity(name){
		$("#activityName").val(name);
		document.forms['approveForm'].submit();
	}
	
	function rejectActivity(name){
		$("#activityName").val(name);
		$("#rejectDialog").dialog("open");
	}
	
	$( "#rejectDialog" ).dialog({
		autoOpen: false,
		height: 350,
		width: 350,
		modal: true,
		buttons: {
			"Propose change": function() {
				var name = document.getElementById("activityName").value;
				var arguments = "activityName="+name+"&"+buildParameter("changeSubject")+"&"+buildParameter("changeDetails");
				ajaxCall("toolsManager", "21", arguments, forward);
				$( this ).dialog( "close" );
				},
			Cancel: function() {
				$( this ).dialog( "close" );
			}
		},
		close: function() {
			$( this ).dialog( "close" );
		}
	});
	
	function forward(data){
		document.forms["rejectForm"].submit();
	}

</script>


<% 
	List allReqs = (List)session.getAttribute("allReqs");
	List allVOCLines = (List)session.getAttribute("allVOCLines");
	List<Activity> activitiesForUser = (List)session.getAttribute("activitiesForUser");
	List<VOCTable> vocByActName = (List)session.getAttribute("vocByActName");
%>

<div class="pageTitle">
	<div style="text-align:left;">
		<a href="/proddev/controller?manager=dataAccessManager&method=21">
			<img src="/proddev/images/arrowleft.png" align="middle" height="20" width="30" style="border:0px"></a>
	</div>
	<p style="font-size:small; font-weight:bold; margin-top:-20px">Needs & Requirements Analysis</p>

</div>

<%if(vocByActName==null){ %>
	<div style="margin:10 0 0;">
		<div style="float:left; text-align:left; font-weight:bold; color:#555555">
			Please choose the activity you want to complete
		</div>
		<select class="regInput" id="activitySelect" name="activitySelect" onchange="$('#voctable').show(), $('#doneVoct').show()" size="1" style="width:25%; float:left; margin-left:10px">
			<option SELECTED>-select activity-</option>
			<%if(activitiesForUser!=null){
				for(int i=0; i<activitiesForUser.size(); i++) {
					Activity activity = (Activity)activitiesForUser.get(i);%>
					<option value="<%=activity.getName()%>"><%=activity.getName() %></option>
				<%}
			}
			%>		
		</select>
		<div style="clear:both"></div>
	</div>
	
	<table id="voctable" border="2" bordercolor="#b8b8b8" width="100%" cellspacing="0" cellpadding="2" style="margin-top:10px; -moz-border-radius:5px;">
		
		<tr>
			<td align="center" bgcolor="#D3D3D3" colspan="7" style="font-size:medium; font-weight:bold">Voice of Stakeholder Table</td>
		</tr>
		
		<tr style="font-size:small; background-color:#EEE0E5">
			<td valign="top" align="center" colspan="2"><b>Voice of Stakeholder</b><p style="font-size:x-small; margin-top:0;">as stated by the stakeholder</p></td>
			<td valign="top" align="center"><b>What</b> is really meant?</td>
			<td valign="top" align="center"><b>How</b> it can be done?</td>
			<td valign="top" align="center"><b>Why</b> is needed?</td>
			<td valign="top" align="center"><b>Who</b> can do it?</td>
			<td>&nbsp;</td>
		</tr>
		
		<tr style="height:20px; font-size:small; background-color:#E6E6FA">
			<td style="font-size:x-small; width:20%;">Requirement</td>
			<td style="font-size:x-small; width:10%">Stakeholder</td>
			<td style="font-size:x-small; width:20%;">rephrased stakeholder need</td>
			<td style="font-size:x-small; width:20%;">which function can fulfill the need</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td style="font-size:x-small;text-align:center">action</td>
		</tr>
		
		<%
		for(int i=0; i<allReqs.size();i++){
			boolean found = false;
			Requirements req = (Requirements)allReqs.get(i);
			for (int j=0; j<allVOCLines.size(); j++){
				VOCTable voct = (VOCTable)allVOCLines.get(j);
				if((voct.getRequirement()).equals(req.getRequirement())){
					found = true;%>
					<tr valign="top" style="font-size:x-small">
						<td style="height:25px"><%=voct.getRequirement() %></td>
						<td ><%=voct.getStakeholder() %></td>
						<td >
							<select size="2" style="width:100%; border:none; overflow:auto">
								<%
								String whats = voct.getWhats();
								String[] whatsArray = whats.split("~");
								for(int k=0; k<whatsArray.length; k++){%>
									<option><%=whatsArray[k] %></option>
								<%}
								%>
							</select>
						</td>
						<td >
							<select size="2" style="width:100%; border:none; overflow:auto">
								<%
								String hows = voct.getHows();
								String[] howsArray = hows.split("~");
								for(int k=0; k<howsArray.length; k++){%>
									<option><%=howsArray[k] %></option>
								<%}
								%>
							</select>
						</td>
						<td >
							<select size="2" style="width:100%; border:none; overflow:auto">
								<%
								String whys = voct.getWhys();
								String[] whysArray = whys.split("~");
								for(int k=0; k<whysArray.length; k++){%>
									<option><%=whysArray[k] %></option>
								<%}
								%>
							</select>
						</td>
						<td >
							<select size="2" style="width:100%; border:none; overflow:auto">
								<%
								String whos = voct.getWhos();
								String[] whosArray = whos.split("~");
								for(int k=0; k<whosArray.length; k++){%>
									<option><%=whosArray[k] %></option>
								<%}
								%>
							</select>
						</td>
						<td style="text-align:center">completed</td>						
					</tr>
				<%continue;
				}
			
			}
			if(found){
				continue;
			}%>
			<tr valign="top" style="font-size:x-small">
				<td ><%=req.getRequirement() %></td>
				<td ><%=req.getStakeholder() %></td>
				<td ><select size="2" id="what_<%=i%>" ondblclick="addWhat('what_<%=i%>')" style="width:100%; border:none; overflow:auto"></select></td>
				<td ><select size="2" id="how_<%=i%>" ondblclick="addHow('how_<%=i%>')" style="width:100%; border:none"></select></td>
				<td ><select size="2" id="why_<%=i%>" ondblclick="addWhy('why_<%=i%>')" style="width:100%; border:none"></select></td>
				<td ><select size="2" id="who_<%=i%>" ondblclick="addWho('who_<%=i%>')"style="width:100%; border:none"></select></td>
				<td id="action_<%=i%>" style="text-align:center">
					<img src="/proddev/images/Check.png" onclick="submitLine('<%=req.getRequirement()%>', '<%=req.getStakeholder()%>', '<%=i%>')" align="middle" width="20" height="20"/>
					<img src="/proddev/images/listRemove.png" onclick="clearLine('<%=i%>')" align="middle" width="20" height="20"/>
				</td>
			</tr>
				
		<%}%>
	</table>
		
	<div>
		<button id="doneVoct" name="doneVoct" onclick="doneVoct(document.getElementById('activitySelect').value)" style="width:200px; margin-top:10px; font-weight:bold; float:right">Finish activity</button>
	</div>
	
	<div style="clear:both"></div>
	
	<form name="voctForm" method="post" action="/proddev/controller">
		<input type = "hidden" name = "<%=ControllerConstants.MANAGER_KEY%>" value = "<%=ControllerConstants.ACTIVITY_MANAGER%>"/>
		<input type = "hidden" name = "<%=ControllerConstants.METHOD_KEY%>" value = "<%=ActivityConstants.CHANGE_STATUS%>"/>
		<input type="hidden" id="activityName" name="activityName"/> 
	</form>
	
	<div id="voctDialog" title="Add information" style="font-family:verdana; font-size:small;">
		<input type="hidden" id="currentId">
		<input type="hidden" id="line">
		<input id="voctInput" type="text" class="text ui-widget-content ui-corner-all;" style="width:100%; float:center; margin-top:20px">
	</div>
<%}else{ %>
	<table id="voctableApprove" border="2" bordercolor="#b8b8b8" cellspacing="0" cellpadding="2" style="margin-top:10px; width:100%; -moz-border-radius:5px;">
		
		<tr>
			<td align="center" bgcolor="#D3D3D3" colspan="7" style="font-size:medium; font-weight:bold">Voice of Stakeholder Table</td>
		</tr>
		
		<tr style="font-size:small; background-color:#EEE0E5">
			<td valign="top" align="center" colspan="2"><b>Voice of Stakeholder</b><p style="font-size:x-small">as stated by the stakeholder</p></td>
			<td valign="top" align="center"><b>What</b> is really meant?</td>
			<td valign="top" align="center"><b>How</b> it can be done?</td>
			<td valign="top" align="center"><b>Why</b> is needed?</td>
			<td valign="top" align="center"><b>Who</b> can do it?</td>
			<td>&nbsp;</td>
			
		</tr>
		
		<tr style="height:20px; font-size:small; background-color:#E6E6FA">
			<td style="font-size:x-small; width:20%;">Requirement</td>
			<td style="font-size:x-small; width:10%">Stakeholder</td>
			<td style="font-size:x-small; width:20%;">rephrased stakeholder need</td>
			<td style="font-size:x-small; width:20%;">which function can fulfill the need</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td style="font-size:x-small;">Author</td>
		</tr>
		
		<%for(int i=0; i<vocByActName.size(); i++){
			VOCTable voct = vocByActName.get(i);%>
			<tr valign="top" style="font-size:x-small">
				<td><%=voct.getRequirement() %></td>
				<td><%=voct.getStakeholder() %></td>
				<td>
					<%String whats = voct.getWhats(); 
					String[] whatsArray = whats.split("~");
					for (int k=0; k<whatsArray.length; k++){%>
						<%=whatsArray[k]+"</br>" %>
					<%} %>
				</td>
				<td>
					<%String hows = voct.getHows(); 
					String[] howsArray = hows.split("~");
					for (int k=0; k<howsArray.length; k++){%>
						<%=howsArray[k]+"</br>" %>
					<%} %>
				</td>
				<td>
					<%String whys = voct.getWhys(); 
					String[] whysArray = whys.split("~");
					for (int k=0; k<whysArray.length; k++){%>
						<%=whysArray[k]+"</br>" %>
					<%} %>
				</td>
				<td>
					<%String whos = voct.getWhos(); 
					String[] whosArray = whos.split("~");
					for (int k=0; k<whosArray.length; k++){%>
						<%=whosArray[k]+"</br>" %>
					<%} %>
				</td>
				<td><%=voct.getAuthor() %></td>
			</tr>
		<%} %>
	</table>
	<%VOCTable voct = vocByActName.get(0);
	String activityName = voct.getActivityName();%>
	<div style="margin-top:10px; width:100%">
		<button id="rejectActivity" name="rejectActivity" onclick="rejectActivity('<%=activityName%>')" style="width:150px; font-weight: bold; float:left">Reject activity</button>
		<button id="approveActivity" name="approveActivity" onclick="approveActivity('<%=activityName%>')" style="width:150px; font-weight: bold; float:right">Approve activity</button>
		<div style="clear:both"></div>
	</div>
	
	<div id="rejectDialog" title="Propose changes" style="display:none">
		<jsp:include page="/pages/content/project/devTools/workspace/changes/changeReport.jsp"></jsp:include>
	</div>
	
	<form name="rejectForm" method="post" action="/proddev/controller">
		<input type = "hidden" name = "<%=ControllerConstants.MANAGER_KEY%>" value = "<%=ControllerConstants.TOOLS_MANAGER%>"/>
		<input type = "hidden" name = "<%=ControllerConstants.METHOD_KEY%>" value = "<%=ToolsConstants.STAKEHOLDERS_FWD%>"/>
	</form>
	
	<form name="approveForm" method="post" action="/proddev/controller">
		<input type = "hidden" name = "<%=ControllerConstants.MANAGER_KEY%>" value = "<%=ControllerConstants.ACTIVITY_MANAGER%>"/>
		<input type = "hidden" name = "<%=ControllerConstants.METHOD_KEY%>" value = "<%=ActivityConstants.UPDATE_ACTIVITY%>"/>
		<input type="hidden" name="activityName" id="activityName">
	</form>
<%}%>